<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
    .first span {
        color: red;
    }

    .food li {
        /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
        border: 1px solid red;

    }
    </style>
</head>

<body>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <!--下面是本小节任务代码-->
    <ul class="food">
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
</body>

</html>
<!-- 总结：>作用于元素的第一代后代，空格作用于元素的所有后代。 -->